{include file="public/header"}
</head>
<style>
    .layui-bg-green,
    .layui-bg-orange {
        padding: 5px 8px;
        border-radius: 5px;
    }

    .layui-input {
        height: 28px;
        width: 50px;
    }
</style>

<body>
    <div class="cBody">
        <div class="console">
            <a class="layui-btn" onclick="OpenView('{:url('Column/add')}','添加栏目')">添加栏目</a>
        </div>
        <table class="layui-table" id="demo" lay-filter="test"></table>
    </div>
</body>
<script type="text/html" id="img">
    {{#  if(d.column_img !=''){ }}
    <div><img src="{{d.column_img}}" width="20" height="20" onclick="OpenImgs(this.src)" /></div>
    {{#  } else { }}
    <div>暂无</div>
    {{#  } }}
</script>
<script type="text/html" id="barDemo" lay-filter="test">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script type="text/html" id="barShow">
    {{#  if(d.is_show =='1'){ }}
    <div><a href="#" class="layui-bg-green" onclick="shortcuts('column','{{d.id}}','is_show',this,'{:url('Login/shortcuts')}')">显示</a></div>
    {{#  } else { }}
    <div><a href="#" class="layui-bg-orange" onclick="shortcuts('column','{{d.id}}','is_show',this,'{:url('Login/shortcuts')}')">隐藏</a></div>
    {{#  } }}
</script>
<script type="text/html" id="barPx">
    <input class="layui-input" type="tel" maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" onblur="shortcuts('column','{{d.id}}','px',this,'{:url('Login/shortcuts')}')" value="{{d.px}}">
</script>
<script>
    layui.config({
        base: '/static/admin/layui/'
    }).use(['tableTreeDj', 'jquery', 'table'], function () {
        const tableTree = layui.tableTreeDj;
        const $ = layui.$;
        var table = layui.table;

        // 与 layui.table 的参数完全一致,内部本来就是把这些参数传递给table模块的
        const objTable = {
            elem: '#demo'
            , url: '{:url("Column/list")}' //数据接口
            , method: 'POST'
            , cols: [[
                { field: 'name', title: '栏目名称' },
                { field: 'column_img', title: '栏目图片', templet: "#img" },
                { field: 'is_show', title: '显示/隐藏', templet: "#barShow" },
                { field: 'px', title: '排序', templet: "#barPx" },
                { field: 'add_date', title: '添加时间', templet: "<div>{{ layui.laytpl.toDateString(d.add_date*1000) }}</div>" },
                { field: 'rep_date', title: '更新时间', templet: "<div>{{ layui.laytpl.toDateString(d.rep_date*1000) }}</div>" },
                { field: 'right', title: '操作', toolbar: "#barDemo", fixed: 'right' },
            ]]
            , id: 'list'
        }
        //监听工具条
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                // console.log(data.id);
                del('{:url("Column/del")}', data.id, obj);
            } else if (obj.event === 'edit') {
                OpenView('{:url("Column/edit")}?id=' + data.id, '编辑');
            }
        });
        // 本组件用到的参数, 组件内部有默认值,与此一致,因此您可以只声明不一致的配置项
        const config = {
            keyId: "id" // 当前ID
            , keyPid: "parent_id" // 上级ID
            , title: "name" // 标题名称字段,此字段td用于绑定单击折叠展开功能
            , indent: '&emsp;&emsp;' // 子级td的缩进.可以是其他字符
            // 图标
            , icon: {
                open: 'layui-icon layui-icon-triangle-d', // 展开时候图标
                close: 'layui-icon layui-icon-triangle-r', // 折叠时候图标
            }
            , showCache: true //是否开启展开折叠缓存,默认不开启.
            , sort: 'asc'
        };
        // 渲染 
        tableTree.render(objTable, config);
        // 其他一系列操作后.重新渲染表格,此时可以不传递参数.内部记录了上次传入的参数.
        tableTree.render();
        // 点击搜索按钮后重载数据.此时可以传入where条件.obj参数与官方表格一致.
        // obj = { where: { id: 1 } };
        // tableTree.reload(obj);
    });
</script>
{include file="public/footer"}